<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        /**
         * outerWidth: 返回浏览器窗口自身的大小，不管在最外层的window上还是frame标签中
         * innerWidth: 返回浏览器窗口中页面视口的大小(不包含浏览器的边框和工具栏)
         * document.documentElement.clientWidth: 返回页面视口的大小
        */

        // 浏览器窗口的精确尺寸不好确定，但可以确定页面视口的大小
        let pageWidth = window.innerWidth
            pageHeigth = window.innerHeight
        
        if (typeof pageWidth != "number") {
            if (document.compatMode == "CSS1Compat") { // 用来检查是否处于标准模式
                pageWidth = document.documentElement.clientWidth
                pageHeigth = document.documentElement.clientHeight
            } else {
                pageWidth = document.body.clientWidth
                pageHeigth = document.body.clientHeight
            }
        }

        /**
         * 移动设备上: 
         * innerWidth返回屏幕上页面可视区域的大小
         * document.documentElement.clientWidth中提供了相同的信息
         * 放大缩小这些值改变
        */
       // 可以使用resizeTo()和resizeBy()调整窗口大小
       // 一个接收新的宽度和高度值，一个接收宽度和高度各要缩放多少

       // 缩放到100*100
       window.resizeTo(100, 100)

       // 缩放到200*150
       window.resizeBy(100, 50)
    </script>
</body>
</html>